<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework1day07</title>
    <style>
.name1{
    background-image: url(../day07/\(%G59\)OS9I3$51NV3X$831K.jpg);
    width: 146px;height: 140px;
    background-position: -107px -264px;
  display: inline-block;
  background-repeat: no-repeat;
  border: solid;
}
.name2{
    background-image: url(../day07/\(%G59\)OS9I3$51NV3X$831K.jpg);
    width: 110px;height: 139px;
  background-position: -367px -405px;
  background-repeat: no-repeat;
  border: solid;
  display: inline-block;
}
.name3{
    background-image: url(../day07/\(%G59\)OS9I3$51NV3X$831K.jpg);
    width: 111px;height: 140px;
  background-position: 0 -268px;
  display: inline-block;
  background-repeat: no-repeat;
  border: solid;
}
.name4{
    background-image: url(../day07/\(%G59\)OS9I3$51NV3X$831K.jpg);
    width: 96px;height: 140px;
  background-position: 0 -130px;
  display: inline-block;
  background-repeat: no-repeat;
  border: solid;
}

.semicircletop{
    width: 100px;height: 50px;
    border: solid;
    display: block;
    border-radius: 50px 50px 0 0;
    display: inline-block;
}
.semicirclebuttom{
    width: 100px;height: 50px;
    border: solid;
    display: block;
    border-radius: 0 0 50px 50px;
    display: inline-block;
}
.semicircleleft{
    width: 50px;height: 100px;
    border: solid;
    display: block;
    border-radius: 50px 0 0 50px;
    display: inline-block;
}
.semicircleright{
    width: 50px;height: 100px;
    border: solid;
    display: block;
    border-radius: 0 50px 50px 0px ;
    display: inline-block;
}
.triangle{
    width: 0;height: 0px;
    border-style: solid;
    border-width: 200px 100px;
    border-color: red red transparent transparent;
    display: inline-block;
}
.equilateral{
    width: 0;height: 0px;
    border-style: solid;
    border-width: 210px 120px;
    display: inline-block;
    border-color: red transparent transparent;
}
.quadrant{
    width: 350px;height: 150px;
   border: solid;
   background-image: linear-gradient(45deg,pink, skyblue);
   border-radius: 150px 150px 150px 150px;
   display: inline-block;
   vertical-align: top;
}

    </style>
</head>
<body>
  <!-- 拼姓名首字母 -->
    <div class="name1"></div>
    <div class="name2"></div>
    <div class="name3"></div>
    <div class="name4"></div>
<!-- 四个半圆 -->
    <div class="semicircletop"></div>
    <div class="semicirclebuttom"></div>
    <div class="semicircleleft"></div>
    <div class="semicircleright"></div>
<!-- 三角形 -->
    <div class="triangle"></div>
  </br>
      <div class="equilateral"></div>
      <div class="quadrant"></div> 
</body>
</html>